<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>查看赛事详情</title>
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/vue.min.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }

    ol {
        list-style-type: demical;
        width: 100%;
        text-align: left;
    }

    ol li {
        list-style-position: outside;
    }

    tr td,
    tr th {
        text-align: center !important;
        border: none !important;
    }

    .layui-laydate-content tr td {
        border-bottom: none !important;
        border-top: none !important;
    }

    tr td {
        border-bottom: 1px solid #eee !important;
        border-top: 1px solid #eee !important;
    }
</style>

<body style="background: #fff;">
    <div class="layui-fluid" id="All_List" v-cloak>
        <div class="title">赛事类型</div>
        <div class="border">
            <ul class="first">
                <li>
                    <h2>对战人数</h2>
                    <p>{{vsPerNum}}</p>
                </li>
                <li>
                    <h2>山东省业余足球联赛</h2>
                    <p>{{leagueMatch}}</p>
                </li>
                <li>
                    <h2>赛制规则</h2>
                    <p>{{rule}}</p>
                </li>
            </ul>
        </div>
        <div class="title">赛事基本信息</div>
        <div class="border">
            <dl>
                <dt>
                    <span style="width: 10%">赛事名称：</span>
                    <p>{{name}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">主办单位：</span>
                    <p>{{organizers}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">主办方法人：</span>
                    <p>{{organizersLegalPerson}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">主办方注册资金：</span>
                    <p>{{organizersRegisteredFund}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">主办方类型：</span>
                    <p>{{organizersType}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">协办单位：</span>
                    <p>{{assistors}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">起止时间：</span>
                    <p>{{competitionStartTime}} 至 {{competitionEndTime}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">主办地：</span>
                    <p>{{address}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">比赛介绍：</span>
                    <p>{{content}}</p>
                </dt>
                <dt>
                    <span style="width: 10%">注意事项：</span>
                    <p>{{cautions}}</p>
                </dt>
            </dl>
        </div>
        <div class="title">赛程安排</div>
        <div class="border">
            <h3><span>场次：</span>{{total}}场</h3>
            <ul class="second">
                <li v-for='item in items'>
                    <div class="num">{{item.roundNum}}</div>
                    <span class="jian">›</span>
                    <div class="clear"></div>
                    <div class="info">
                        <dl>
                            <dt style="width: 100%">
                                <span style="width: 9%;">地点：</span>
                                <h5>{{item.address}}</h5>
                            </dt>
                            <dt style="width: 100%">
                                <span style="width: 9%;">时间：</span>
                                <h5>{{item.dateTime}}</h5>
                            </dt>
                            <dt style="width: 100%">
                                <span style="width: 9%;">对战球队：</span>
                                <h5>{{item.primaryTeam}} VS {{item.assistantTeam}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>接待酒店：</span>
                                <h5>{{item.ReceptionHotel}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>酒店联系方式：</span>
                                <h5>{{item.ReceptionPhone}}</h5>
                            </dt>
                            <dt style="width: 50%;margin-bottom: 13px;">
                                <span>备选酒店：</span>
                                <h5>{{item.alternativeHotel}}</h5>
                            </dt>
                            <dt style="width: 50%;margin-bottom: 13px;">
                                <span>酒店联系方式：</span>
                                <h5>{{item.alternativePhone}}</h5>
                            </dt>
                            <hr class="layui-bg-gray" style="background-color: #c3c3c3!important;">
                            <dt style="width: 100%">
                                <span style="width: 9%;">主裁判：</span>
                                <h5>{{item.prumaryName}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>助理裁判1：</span>
                                <h5>{{item.assistantName1}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>助理裁判2：</span>
                                <h5>{{item.assistantName2}}</h5>
                            </dt>
                            <dt style="width: 100%">
                                <span style="width: 9%;">第四裁判：</span>
                                <h5>{{item.fourthName}}</h5>
                            </dt>
                            <dt style="width: 100%">
                                <span style="width: 9%;">赛区协会：</span>
                                <h5>{{item.association}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>接待酒店：</span>
                                <h5>{{item.primaryHotel}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>酒店联系方式：</span>
                                <h5>{{item.primaryPhone}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>备选酒店：</span>
                                <h5>{{item.assistantHotel}}</h5>
                            </dt>
                            <dt style="width: 50%">
                                <span>酒店联系方式：</span>
                                <h5>{{item.assistantPhone}}</h5>
                            </dt>
                        </dl>
                        <div class="clear"></div>
                        <div class="look">
                            <a @click="openWin">查看赛事数据</a>
                        </div>
                    </div>
                </li>
            </ul>
            <h3 style="margin:20px 0"><span>赞助商：</span>{{sponsors}}</h3>
        </div>
        <div class="title">历史记录</div>
        <div class="border">
            <ol class="third">
                <div v-if="contentHistoryList.length == 0">无</div>
                <div v-else>
                    <li v-for="(item,index) in contentHistoryList" :key="item.id">{{index + 1}}.{{item.content}}</li>
                </div>
            </ol>
        </div>
    </div>
    <div class="title">已招募裁判</div>
    <div style="padding: 0 15px;">
        <div class="border">
            <table id="application_table1" lay-filter="test1" lay-data="{id: 'testReload1'}"></table>
        </div>
    </div>
    <div class="title">已报名成功球队</div>
    <div style="padding: 0 15px;">
        <div class="border">
            <table id="application_table2" lay-filter="test2" lay-data="{id: 'testReload2'}"></table>
        </div>
    </div>

    <script>
        setTimeout(function () {
            layui.use(['table', 'laydate'], function () {
                var table = layui.table;
                var form = layui.form;
                var laydate = layui.laydate;
                var index = layer.load(1); //添加laoding,0-2两种方式
                $(document).ready(function () {
                    $("body").on('click', '.border .second li', function () {
                        console.log($(this))
                        $(this).children('.info').slideToggle().parents(
                            '.border .second').siblings(
                            '.border .second').children('.info').hide();
                        if ($(this).children('span').hasClass('active')) {
                            $(this).children('span').removeClass('active')
                        } else {
                            $(this).children('span').addClass('active')
                        }
                    });
                    $(".border .second li .info").click(function (e) {
                        e.stopPropagation();
                    });
                });
                var id = $(".title").attr("data-val")
                var table1 = table.render({
                    elem: '#application_table1', //指定原始表格元素选择器（推荐id选择器）
                    // 附加参数，post token
                    // where: { 'token': token },
                    where: {
                        competitionId: id
                    },
                    loading: true,
                    method: 'get',
                    url: findRefereeListByNewcompetitionId, //数据接口
                    page: true, //开启分页
                    // toolbar: 'default', //开启工具栏，此处显示默认图标
                    limit: 10,
                    limits: [10, 20, 30, 50, 100, 500, 1000, 5000, 10000],
                    cols: [
                        [ //表头
                            {
                                field: 'id',
                                title: '用户ID',
                                width: 100
                            },
                            {
                                field: 'name',
                                title: '姓名',
                                width: 150
                            },
                            {
                                field: 'sex',
                                title: '性别',
                                width: 150,
                                templet: function (d) {
                                    if (d.sex == "1") {
                                        return "男"
                                    } else if (d.sex == "2") {
                                        return "女"
                                    } else {
                                        return ""
                                    }
                                }
                            },
                            {
                                field: 'bloodType',
                                title: '血型',
                                width: 150,
                                templet: function (d) {
                                    if (d.bloodType == "1") {
                                        return "A"
                                    } else if (d.bloodType == "2") {
                                        return "B"
                                    } else if (d.bloodType == "3") {
                                        return "AB"
                                    } else if (d.bloodType == "4") {
                                        return "O"
                                    } else {
                                        return ""
                                    }
                                }
                            },
                            {
                                field: 'nation',
                                title: '民族',
                                width: 150
                            },
                            {
                                field: 'year',
                                title: '年份',
                                width: 150
                            },
                            {
                                field: 'city',
                                title: '市级',
                                width: 150
                            },
                            {
                                field: 'headPhoto',
                                title: '相关资质照片',
                                width: 150,
                                templet: function (d) {
                                    if (d.headPhoto == null) {
                                        return "-"
                                    } else {
                                        return "<div onclick='show_img(this)' ><img style='width: 32px;height: 32px;' src='" +
                                            d.headPhoto +
                                            "'></div>'"
                                    }
                                }
                            },
                            {
                                field: 'addTime',
                                title: '创建时间',
                                width: 200,
                                templet: function (d) {
                                    if (d.addTime == null) {
                                        return "-"
                                    } else {
                                        return d.addTime
                                    }
                                }
                            }
                        ]
                    ],
                    id: 'testReload1',
                    done: function (res) {
                        console.log(res)
                        if (res.msg == "2") {
                            parent.window.location.href =
                                getRequestPrefix() +
                                "/footBallAdmin/login.html"
                        }
                        layer.close(index)
                    }
                });
                var table2 = table.render({
                    elem: '#application_table2', //指定原始表格元素选择器（推荐id选择器）
                    // height: 600,
                    width: "100%",
                    where: {
                        "competitionId": id,
                    },
                    // 附加参数，post token
                    loading: true,
                    method: 'get',
                    url: findTeamApplyStatusListByNewcompetitionId, //数据接口
                    page: true, //开启分页
                    // toolbar: 'default', //开启工具栏，此处显示默认图标
                    cols: [
                        [ //表头
                            // { type: 'checkbox', fixed: 'left' },
                            {
                                field: 'id',
                                title: 'ID',
                                width: 150
                            },
                            {
                                field: 'name',
                                title: '赛事名称',
                                width: 150
                            },
                            {
                                field: 'linkman',
                                title: '联系人',
                                width: 150
                            },
                            {
                                field: 'fixationTel',
                                title: '固定电话',
                                width: 150
                            },
                            {
                                field: 'linkTel',
                                title: '联系电话',
                                width: 150
                            },
                        ]
                    ],
                    id: 'testReload2',
                    done: function (res) {
                        console.log(res)
                        if (res.msg == "2") {
                            parent.window.location.href = getRequestPrefix() +
                                "/footBallAdmin/login.html"
                        }
                        layer.close(index)
                    }
                });






















                var app = new Vue({
                    el: "#All_List",
                    data: {
                        items: [],
                        rule: '',
                        total: '',
                        vsPerNum: '',
                        name: '',
                        organizers: '',
                        assistors: "",
                        competitionStartTime: '',
                        competitionEndTime: '',
                        address: '',
                        content: '',
                        cautions: '',
                        sponsors: '',
                        leagueMatch: "",
                        organizersLegalPerson: "",
                        organizersRegisteredFund: "",
                        organizersType: "",
                        contentHistoryList: []
                    },
                    methods: {
                        index: function () {
                            var that = this
                            $.ajax({
                                url: findRoundByCompetitionId,
                                type: 'get',
                                data: {
                                    competitionId: id
                                },
                                dataType: 'json',
                                success: function (data) {
                                    console.log(data)
                                    if (data.msg == 0) {
                                        that.rule = data.rule
                                        that.vsPerNum = data.vsPerNum
                                        that.total = data.total
                                        that.name = data.competitionDetails.name
                                        that.leagueMatch = data.leagueMatch
                                        that.organizers = data
                                            .competitionDetails
                                            .organizers
                                        that.organizersLegalPerson = data
                                            .competitionDetails
                                            .organizersLegalPerson
                                        that.organizersRegisteredFund = data
                                            .competitionDetails
                                            .organizersRegisteredFund
                                        that.organizersType = data
                                            .competitionDetails.organizersType
                                        that.assistors = data.competitionDetails
                                            .assistors
                                        that.competitionStartTime = data
                                            .competitionDetails
                                            .competitionStartTime
                                        that.competitionEndTime = data
                                            .competitionDetails
                                            .competitionEndTime
                                        that.address = data.competitionDetails
                                            .address
                                        that.content = data.competitionDetails
                                            .content
                                        that.cautions = data.competitionDetails
                                            .cautions
                                        that.sponsors = data.competitionDetails
                                            .sponsors
                                        that.items = data.roundList
                                    } else {
                                        layer.alert(data.msg, {
                                            title: '提示'
                                        })
                                    }
                                },
                                error: function (data) {
                                    console.log(data)
                                    layer.alert(data.msg, {
                                        title: '提示'
                                    })
                                }
                            });
                        },
                        openWin: function () {
                            // layer.msg('审批');
                            layer.open({
                                content: "event_data_no.html",
                                type: 2,
                                area: ["100%", "100%"],
                                title: "赛事数据",
                                shadeClose: true,
                                success: function (layero, index) {
                                    //获取点击行的数据,获取打开的iframe
                                    var body = layer.getChildFrame('body',
                                        index);
                                    var iframeWin = window[layero.find(
                                        'iframe')[0][
                                        'name'
                                    ]];
                                    var id = $(".title").attr("data-val")
                                    iframeWin.child(id)
                                }
                            })
                        },
                        history: function () {
                            var that = this
                            $.ajax({
                                url: compotitionLogs,
                                type: 'get',
                                data: {
                                    competitionId: id
                                },
                                dataType: 'json',
                                success: function (res) {
                                    if (res.msg == 0) {
                                        if (res.competitionLog.length !== 0) {
                                            that.contentHistoryList = res
                                                .competitionLog
                                        }
                                    }
                                },
                                error: function (data) {
                                    console.log(data)
                                    layer.alert(data.msg, {
                                        title: '提示'
                                    })
                                }
                            })
                        }
                    },
                    created: function () {
                        this.index()
                        this.history()

                    }
                })
            })

        }, 100);
    </script>
</body>

</html>